This is a passion project of mine.
I have always been interested in Science, specifically the Periodic Table of the Elements. It is a great collection of information and the way it is organized and grouped is subjectively a blast to dive into.
Since I have been a UX and Motion Designer, I have always wanted to create an interactive Periodic Table that gave more than just the table itself. Rive has helped me create this piece.
In the version of Rive I used to make this (v 0.8.481), text was not a functional feature within the software. I used After Effects and Photoshop to create most of the artwork you see here and incorporated them into artboards to create button functionality and the overall UI design.
I used simple shapes layers in After Effects to create a dashed stroke around an ellipse. I then animated the gap distance of the stroke to give me the ability to control the number of electrons around each electron shell.
All 118 element atomic structures and their electron configurations.
Artboard setup in Rive
State Machine setup in Rive
